<!--
 * @Description:
 * @Author: dh
 * @Date: 2021-08-19 17:18:39
 * @LastEditors: dh
 * @LastEditTime: 2023-11-13 17:12:34
-->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>IntersectionObserver</title>
	</head>

	<!-- http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html -->
	<!-- https://juejin.cn/post/6844903874302574599 -->

	<body>
		<style>
			body {
				height: 2000px;
			}

			.box {
				position: absolute;
				top: 1300px;
				left: 0;
				height: 200px;
				width: 200px;
				background: red;
				opacity: 0.4;
			}

			#content {
				height: 500px;
				overflow: auto;
				position: relative;
				border: 1px dashed red;
			}

			.txt {
				position: fixed;
				top: 0;
				left: 0;
			}
		</style>
		<div id="content">
			<div class="txt"></div>
			<div class="box"></div>
		</div>
		<script>
			var txt = document.querySelector('.txt');

			var config = {
				root: null, // 用于观察的根元素，默认是浏览器的视口，也可以指定具体元素，指定元素的时候用于观察的元素必须是指定元素的子元素
				// root: document.querySelector('#content'), // 用于观察的根元素，默认是浏览器的视口，也可以指定具体元素，指定元素的时候用于观察的元素必须是指定元素的子元素
				threshold: [0, 0.5, 1], // 用来指定交叉比例，决定什么时候触发回调函数 0 代表即将出现在视口
				// rootMargin: '300px 100px 500px 100px' // 用来扩大或者缩小视窗的的大小
			};
			var callback = function (e) {
				console.log(e);
				// boundingClientRect 返回包含目标元素的边界信息，返回结果与element.getBoundingClientRect() 相同
				// intersectionRatio 返回目标元素出现在可视区的比例
				// intersectionRect 用来描述root和目标元素的相交区域
				// isIntersecting 返回一个布尔值，下列两种操作均会触发callback：1. 如果目标元素出现在root可视区，返回true。2. 如果从root可视区消失，返回false
				// rootBounds 用来描述交叉区域观察者(intersection observer)中的根.
				// target 目标元素：与根出现相交区域改变的元素 (Element)
				// time 返回一个记录从 IntersectionObserver 的时间原点到交叉被触发的时间的时间戳

				if (e[0].isIntersecting) {
					txt.innerHTML = '可见';
				} else {
					txt.innerHTML = '不可见';
				}
			};
			var io = new IntersectionObserver(callback, config);

			// 开始观察，观察多个时，多次调用
			io.observe(document.querySelector('.box'));

			// 停止观察
			// io.unobserve(document.querySelector('.box'))

			// 返回所有观察目标的IntersectionObserverEntry对象数组
			// io.takeRecords()

			// 使IntersectionObserver对象停止全部监听工作
			// io.disconnect()

			//TODO: 应用
			// 1.图片懒加载
			// const imgList = [...document.querySelectorAll('img')]

			// var io = new IntersectionObserver((entries) => {
			//     entries.forEach(item => {
			//         // isIntersecting是一个Boolean值，判断目标元素当前是否可见
			//         if (item.isIntersecting) {
			//             item.target.src = item.target.dataset.src
			//             // 图片加载后即停止监听该元素
			//             io.unobserve(item.target)
			//         }
			//     })
			// }, {
			//     root: document.querySelector('.root')
			// })

			// // observe遍历监听所有img节点
			// imgList.forEach(img => io.observe(img))
		</script>
	</body>
</html>
